<template>
  <div class="  bg-gray-900 min-h-screen text-gray-200 ">
    <div class="container mx-auto">




      <h1>当前 : {{ currentPage }} 页 </h1>
      <div class="space-x-4">
        <button class=" text-black p-3 " @click="NextOrPrevious(-pageSize)">Previous</button>
        <button class=" text-black p-3 " @click="NextOrPrevious(pageSize)">Next</button>
      </div>

      <div v-for="(item,index) in movie_script">
        <p>{{ index }}</p>
        <p class="text-3xl " @click="show_out(index)">{{ item.english }}</p>
        <p class="text-2xl   "    :class="{ 'text-gray-900':currentIndex !== index , 'text-gray-200':currentIndex === index }"    >
          {{ item.chinese }}</p>
      </div>


      



    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Movie_script",
  data() {
    return {
      isShow: false,
      currentIndex : 0,
      movie_script: [],
      currentPage: 0,
      pageSize: 100,
    }
  },
  methods: {
    show_out(ii) {
      this.currentIndex = ii; setTimeout(()=>{this.currentIndex = 99999},360)
    },
    NextOrPrevious(n) {
      let __this = this
      __this.currentPage += n
      axios.post('http://127.0.0.1:8123/get_movie_script/' , {
        currentPage : __this.currentPage,
        pageSize : __this.pageSize,
        name : __this.$route.params.name
      }).then(response => {
        console.log(response)
        __this.movie_script = response.data
      })


    }
  },
  created() {
    document.title = " 电影台词 ";
    console.log(this.$route.params.name)
    //?pageSize=111&pageIndex=50
    let __this = this
    axios.post('http://127.0.0.1:8123/get_movie_script/' , {
      currentPage : __this.currentPage,
      pageSize : __this.pageSize,
      name : __this.$route.params.name
    }).then(response => {
      console.log(response)
      __this.movie_script = response.data
    })
  }
}
</script>
<style scoped>
</style>
